<script setup>
import { ref } from "vue";
import { getURLParamValue } from "../utils/index.js";
import QRCode from 'qrcode';
const imgUrl = ref()
const generateQR = async (text) => {
  try {
    const opts = {
      errorCorrectionLevel: 'H',
      color: {
        dark: "#818181",
        light: "#F9F9F9"
      },
      type: 'image/png',
      quality: 0.3,
      margin: 1,
    };
    const qrImage = await QRCode.toDataURL(text, opts);
    console.log(qrImage);
    imgUrl.value = qrImage
  } catch (err) {
    console.error(err);
  }
};
const id = getURLParamValue(window.location, "id")
const info = ref({});
const url = `https://agent-auth.fujiwellness.cn/?id=${id}`
generateQR(url)
fetch("/data.json")
  .then((response) => response.json())
  .then((data) => {
    info.value = data[id];
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  });

</script>

<template>
  <div class="content">
    <!-- <div class="printable">富技科技</div> -->
    <img :src="imgUrl" class="qr_img" />
    <div class="qr_tips">扫码辨真伪</div>
    <img src="../assets/logo.png" class="img_box" />
    <div class="img_bottom">
      <img src="../assets/book.png" class="img2_box" />
    </div>
    <div class="box">
      <div class="container">
        <div class="label">授权公司</div>
        <div class="row_line">|</div>
        <div class="info_data">{{ info?.name }}</div>
      </div>

      <div class="container2">
        <div class="label">授权品牌</div>
        <div class="row_line">|</div>
        <div class="info_data">{{ info?.brand }}</div>
      </div>
    </div>
    <div class="box">
      <div class="container">
        <div class="label">被授权公司</div>
        <div class="row_line">|</div>
        <div class="info_data">{{ info?.company }}</div>
      </div>
      <div class="container2">
        <div class="label">授权品类</div>
        <div class="row_line">|</div>
        <div class="info_data">{{ info?.type }}</div>
      </div>
    </div>
    <div class="box">
      <div class="container">
        <div class="label">授权渠道</div>
        <div class="row_line">|</div>
        <div class="info_data">{{ info?.channel }}</div>
      </div>
    </div>
    <div class="line"></div>
    <div class="container bottom">
      <div class="label">授权编号</div>
      <div class="row_line">|</div>
      <div class="info_data">{{ info?.number }}</div>
    </div>
    <div class="container">
      <div class="label">授权日期</div>
      <div class="row_line">|</div>
      <div class="info_data">{{ info?.date }}</div>
    </div>
  </div>
</template>

<style scoped>
.content {
  width: 640px;
  box-sizing: border-box;
  padding: 60px 50px;
  position: relative;
  background: #fff;
  background-image: url("../assets/bg.png");
  background-size: cover;
  background-position: center;
}

.qr_img {
  width: 100px;
  position: absolute;
  left: 20px;
  top: 20px;
}

.qr_tips {
  position: absolute;
  left: 20px;
  top: 120px;
  width: 100px;
  text-align: center;
  font-size: 13px;
  color: #818181;
}

.img_box {
  width: 190px;
  margin: 0 auto;
  margin-bottom: 70px;
}

.img2_box {
  width: 342px;
  margin: 0 auto;
}

.img_bottom {
  margin-bottom: 140px
}

.container {
  display: flex;
  width: 60%;
}

.container2 {
  display: flex;
  width: 40%;
}

.box {
  display: flex;
  margin-bottom: 10px;
}

.label {
  text-align: right;
  font-size: 13px;
  color: #888;
}

.info_data {
  flex: 1;
  text-align: left;
  font-size: 13px;
  color: #888;
  /* font-weight: bold;
  color: #8e8c8c; */
}

.row_line {
  font-size: 13px;
  margin: 0 5px;
  display: flex;
  align-items: center;
  color: #888;
  height: 18px;
}

.line {
  width: 100%;
  height: 1px;
  background: #aea8a8;
  margin: 25px 0;
}

.bottom {
  margin-bottom: 10px;
  width: 100%;
}

@media print {
  body *:not(.printable) {
    display: block;
  }

  .printable {
    display: none !important;
  }

  .content {
    width: 210mm;
    height: 297mm;
  }

  .qr_img {
    left: 40px;
    top: 40px;
  }

  .qr_tips {
    left: 40px;
    top: 140px;
  }

  .img_box {
    width: 64mm;
    margin-bottom: 24mm;
  }

  .img2_box {
    width: 114mm;
  }

  .img_bottom {
    margin-bottom: 47mm;
  }

  .label {
    font-size: 14px;
  }

  .info_data {
    font-size: 14px;
  }
}
</style>
